<template>
	<div class="login-container">
			<el-form ref="loginForm" v-model="user" class="login-form" autocomplete="on" label-position="left">
				<div class="title-container">
				  <h3 class="title">Login Form</h3>
				</div>
				
				<el-form-item prop="username">
				  <el-input
				    ref="username"
				    v-model="user.username"
				    placeholder="请输入用户名"
				    name="username"
				    type="text"
				    tabindex="1"
				    autocomplete="on"
				  />
				</el-form-item>
				<el-form-item prop="password">
				  <el-input
				    ref="password"
				    v-model="user.password"
					:type="passwordType"
				    placeholder="请输入密码"
				    name="password"
				    type="text"
				    tabindex="1"
				    autocomplete="on"
				  />
				</el-form-item>
				<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"  @click="loginadmin">登录</el-button>
			</el-form>
	</div>
</template>
<script>
	import {ref,reactive,getCurrentInstance } from 'vue'
    import message from "../requests/message.js";
	import { useRouter } from 'vue-router'
	export default {
		  setup() {
			const router = useRouter()
			const user = reactive({
				username:'admin',
				password:'123456'
			})		
			const passwordType = ref('password')
			const loading = ref(false)
			const { proxy } = getCurrentInstance()
		    function loginadmin(){
				proxy.$axiosPost('/admin/Login/index',user).then(res =>{
		            //console.log(res.code)
					if(res.code==200){
						//缓存token
						window.sessionStorage.setItem('token',res.data.token)
						router.push({ path: '/index',})
					}else{
						message.error (res.msg);
					}
		        })
		    }
			return { loginadmin,user,passwordType,loading }
		   },
	}
</script>

<style  lang="scss" scoped>
	$bg:#2d3a4b;
	$dark_gray:#889aa4;
	$light_gray:#eee;
	
	.login-container{
		min-height: 100%;
		width: 100%;
		
		background-color: #2d3a4b;
		overflow: hidden;
	}
	.login-form {
	  position: relative;
	  width: 520px;
	  height: 600px;
	  max-width: 100%;
	  padding: 160px 35px 0;
	  margin: 0 auto;
	  overflow: hidden;
	}
	.title-container {
	  position: relative;
	
	  .title {
	    font-size: 26px;
	    color: $light_gray;
	    margin: 0px auto 40px auto;
	    text-align: center;
	    font-weight: bold;
	  }
	}
	.svg-container {
	  padding: 6px 5px 6px 15px;
	  color: $dark_gray;
	  vertical-align: middle;
	  width: 30px;
	  display: inline-block;
	}
</style>